<template>
    <page-header-wrapper>
        <a-card :bordered="false" style="margin-bottom: 20px" title="搜索查询">
            <div class="table-page-search-wrapper">
                <a-form v-bind="queryFormItemLayout">
                    <a-row :gutter="20">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="菜单名称">
                                <div style="display: flex;align-items: center">
                                    <a-input v-model="queryParam.menuName"
                                             placeholder="请输入"/>
                                    <a-button style=" margin-left: 10px"
                                              type="primary" @click="onSearch">
                                        查询
                                    </a-button>
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>
        <a-card :bordered="false">
            <div class="table-operator">
                <div>
                    <a-button icon="plus" type="primary" @click="handleAdd">添加</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                childrenColumnName="childList"
                rowKey="id"
                @change="handleChange"
            >
                  <span slot="header" slot-scope="text, record">
           <a-avatar v-if="record.img" :size="64" :src="record.img"/>
        </span>
                <span slot="status" slot-scope="text, record">
          <a-switch v-model="record.status"
                    @change="(value) => handleChangeSwitch(value,record)"/>
        </span>
                <span slot="action" slot-scope="text, record">
          <template>
            <a-button v-if="record.level === 1" type="link" @click="handleEdit2(record)">添加二级菜单</a-button>
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                          @confirm="handleDelete(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
            </a-table>
        </a-card>
        <a-modal
            :confirmLoading="modalLoading.loading1"
            :title="modalTitle.title1"
            :visible="modalShow.show1"
            :width="640"
            @cancel="handleCancel"
            @ok="handleConfirm"
        >
            <a-form-model
                v-if="modalShow.show1"
                ref="ruleForm1"
                :model="modalForm.ruleForm1"
                :rules="modalRules.rules1"
                style="margin-bottom:20px"
                v-bind="formItemLayout"
            >
                <a-form-model-item label="菜单名称" prop="title">
                    <a-input v-model="modalForm.ruleForm1.title"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="图标" prop="img">
                    <UploadImage :url="modalForm.ruleForm1.img"
                                 @change-url="(url) => modalForm.ruleForm1.img = url"></UploadImage>
                </a-form-model-item>
                <a-form-model-item label="序号" prop="sequenceNumber">
                    <a-input v-model="modalForm.ruleForm1.sequenceNumber"
                             placeholder="请输入" type="number"></a-input>
                </a-form-model-item>
                <a-form-model-item label="状态" prop="status">
                    <a-switch v-model="modalForm.ruleForm1.status"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </page-header-wrapper>
</template>
<script>
import basic from '@/mixins/basic'
import {
    getMenuFloor,
    getMenuPage,
    updateMenu,
    updateMenuStatus,
    addMenu,
    addNextMenu,
    delMenu,
    getRolePage
} from '@/api/api'
import UploadImage from '@/components/uploadImage'

export default {
    mixins: [basic],
    components: {UploadImage},
    data() {
        return {
            request: {
                page: getMenuPage,
                update: updateMenu,
                add: addMenu,
                delete: delMenu,
                updateMenuStatus: updateMenuStatus
            },
            queryParam: {
                menuName: ''
            },
            resetQueryParam: {
                menuName: ''
            },
            columns: [
                {
                    title: '权限名称',
                    dataIndex: 'title'
                },
                {
                    title: '序号',
                    dataIndex: 'sequenceNumber'
                },
                {
                    title: '图标',
                    dataIndex: 'img',
                    scopedSlots: {customRender: 'header'}
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    scopedSlots: {customRender: 'status'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 200,
                    align: 'right',
                    fixed: 'right',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            tableData: [],
            modalForm: {
                ruleForm1: {
                    id: undefined,
                    title: '',
                    img: '',
                    sequenceNumber: '',
                    status: true
                },
            },
            modalResetForm: {
                ruleForm1: {
                    id: undefined,
                    title: '',
                    img: '',
                    sequenceNumber: '',
                }
            },
            modalRules: {
                rules1: {
                    title: [{required: true, message: '输入不能为空'}],
                }
            },
            roleList: [],
            floorList: [],
            parent: {}
        }
    },
    methods: {
        formattData(data) {
            data.forEach(el => {
                el.level = 1
                el.status = el.status == 0
                el.childList = el.childList && el.childList.length ? el.childList : undefined
                if (el.childList) {
                    el.childList.forEach(sub => {
                        sub.level = 2;
                        sub.status = sub.status == 0
                    })
                }
            })
        },
        handleChangeSwitch(value, record) {
            this.request
                .updateMenuStatus({
                    id: record.id,
                    status: record.status ? 0 : 1
                })
                .then(res => {
                    this.$message.success('修改状态成功')
                })
                .catch(() => {
                    record.status = !record.status
                })
        },
        handleAdd() {
            this.parent = {}
            this.modalForm.ruleForm1 = {
                ...this.modalResetForm.ruleForm1
            }
            this.modalTitle.title1 = '新建'
            this.modalShow.show1 = true
        },
        handleEdit(rowItem) {
            this.parent = {}
            for (const key in this.modalForm.ruleForm1) {
                this.modalForm.ruleForm1[key] = rowItem[key]
            }
            this.modalTitle.title1 = '修改'
            this.modalShow.show1 = true
        },
        handleEdit2(rowItem) {
            this.parent = rowItem
            this.modalForm.ruleForm1 = {...this.modalResetForm.ruleForm1}
            this.modalTitle.title1 = '添加二级菜单'
            this.modalShow.show1 = true
        },
        handleConfirm() {
            this.$refs.ruleForm1.validate((valid) => {
                if (valid) {
                    this.modalLoading.loading1 = true
                    let form = {
                        ...this.modalForm.ruleForm1,
                        status: this.modalForm.ruleForm1.status ? 0 : 1,
                    }
                    
                    if (this.parent.id) {
                        // 添加二级
                        addNextMenu({
                            ...form,
                            id: this.parent.id,
                        }).then(res => {
                            this.$message.success(res.msg)
                            this.modalLoading.loading1 = false
                            this.onValidate('ruleForm1')
                            this.modalShow.show1 = false
                            this.onSearch()
                        }).catch(() => {
                            this.modalLoading.loading1 = false
                        })
                    } else {
                        this.request[this.modalForm.ruleForm1.id ? 'update' : 'add']({
                            ...form
                        }).then(res => {
                            this.$message.success(res.msg)
                            this.modalLoading.loading1 = false
                            this.onValidate('ruleForm1')
                            this.modalShow.show1 = false
                            this.onSearch()
                        }).catch(() => {
                            this.modalLoading.loading1 = false
                        })
                    }
                }
            })
        },
    }
}
</script>
